<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport"
        content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>资讯正文</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1440001_u26vvmwousm.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media.css">
</head>

<body>
    <div id="header"></div>
    <!-- ------主体------------ -->
    <section class="detail page3">
        <div class="container">
            <div class="col-md-8 col-sm-12 col-xs-12">
                <div class="content">
                    <div id="main-content">
                    </div>
                    <span class="hr"></span>
                    <!--  <div class="bottom-tip">前作用域提升到前面去的的行为。提升（Hoisting）应用在变量的声明与函数的声明。因此，函数可以在声明之前调用：</div> -->
                    <div class="content-bottom clearfix">
                        <div class="bbtn">
                            <a href="javaScript:;" id="clickCollection" scoff="0" class="btn"><i id="iconsc"
                                    class="glyphicon glyphicon-star-empty"></i>收藏</a>
                            <a href="javaScript:;" id="clickFabulous" dzoff="0" class="btn"><i id="icondz"
                                    class="glyphicon glyphicon-thumbs-up"></i><span id="likeNum"></span></a></div>
                        <div class="share">分享到：<a href="#"><i class="iconfont icon-qq"></i></a><a href="#"><i
                                    class="iconfont icon-wx"></i></a><a href="#"><i class="iconfont icon-wb"></i></a>
                        </div>
                    </div>
                    <div class="page3-left">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                    data-toggle="tab">全部评论</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="home">
                                <div class="users-content"></div>
                                <div class="input-content clearfix">
                                    <div class="user-img"><img src="" alt=""></div>
                                    <form action="#">
                                        <textarea name="" placeholder="" id="" cols="30" rows="10"></textarea>
                                        <!-- <div class="clearfix"><span class="font-num">字数：0</span></div> -->
                                        <div class="clearfix"><a href="javaScript:;" class="btn pull-right btn-primary"
                                                id="submitbtn">发表</a></div>
                                    </form>
                                </div>
                                <ul class="replyList">
                                    <li>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-12 col-xs-12 hidden-xs">
                <div class="page3-right">
                    <!-- Nav tabs -->
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home1" aria-controls="home1" role="tab"
                                data-toggle="tab">热门平台</a></li>
                        <li role="presentation"><a href="#profile1" aria-controls="profile1" role="tab"
                                data-toggle="tab">平台排行</a></li>
                        <li role="presentation"><a href="#messages1" aria-controls="messages1" role="tab"
                                data-toggle="tab">黑平台</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <!-- 热门平台 -->
                        <div role="tabpanel" class="tab-pane active" id="home1">

                        </div>
                        <!-- 平台排行 -->
                        <div role="tabpanel" class="tab-pane" id="profile1">

                        </div>
                        <!-- 黑平台 -->
                        <div role="tabpanel" class="tab-pane" id="messages1">
                            <div class="item clearfix">
                                <div class="img"><img src="img/page3-rightimg.png" alt=""><span class="jg">监管中</span>
                                </div>
                                <div class="txt">
                                    <a href="#">
                                        <p class="tit">品牌商名称</p>
                                    </a>
                                    <span class="span-group"><span class="s1">人气评分</span><span
                                            class="s2">9.33</span></span>
                                    <div class="label-group"><span>澳大利亚</span> | <span>5国监管</span> | <span>全牌照</span>
                                    </div>
                                </div>
                                <img class="top" src="img/top1.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-tj">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#recommend" aria-controls="recommend" role="tab"
                                data-toggle="tab">推荐</a></li>
                        <li role="presentation"><a href="#platform" aria-controls="platform" role="tab"
                                data-toggle="tab">最新</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="recommend">
                            <div class="item1 clearfix">
                                <div class="item-left">
                                    <a href="#">
                                        <span class="star">资讯</span><span class="txt">font-family 属性应该使用若干种字</span>
                                        <div class="bottom"><span class="sl">资讯平台</span><span class="sr">一周前</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="item-right"><a href="#"><img class="img-responsive" src="img/srimg.png"
                                            alt=""></a> </div>
                            </div>
                            <div class="item1 clearfix">
                                <div class="item-left">
                                    <a href="#">
                                        <span class="star">资讯</span><span class="txt">font-family 属性应该使用若干种字</span>
                                        <div class="bottom"><span class="sl">资讯平台</span><span class="sr">一周前</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="item-right"><a href="#"><img class="img-responsive" src="img/srimg.png"
                                            alt=""></a> </div>
                            </div>
                            <div class="item1 clearfix">
                                <div class="item-left">
                                    <a href="#">
                                        <span class="star">资讯</span><span class="txt">font-family 属性应该使用若干种字</span>
                                        <div class="bottom"><span class="sl">资讯平台</span><span class="sr">一周前</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="item-right"><a href="#"><img class="img-responsive" src="img/srimg.png"
                                            alt=""></a> </div>
                            </div>
                            <!-- <a href="#" class="btn btn-primary">展开更多</a> -->
                        </div>
                        <div role="tabpanel" class="tab-pane" id="platform">...</div>
                    </div>
                </div>
                <div class="detail-article">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#recommend" aria-controls="recommend" role="tab"
                                data-toggle="tab" style="width: 100%;">推荐文章</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="recommend">
                            <div class="item1">
                                <p class="tit">请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体</p>
                                <p class="tit-bottom"><span class="img"><img src="img/logos.png"
                                            alt="">|<span>行业新闻</span></span><span class="hour">21小时前</span></p>
                            </div>
                            <div class="item1">
                                <p class="tit">请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体</p>
                                <p class="tit-bottom"><span class="img"><img src="img/logos.png"
                                            alt="">|<span>行业新闻</span></span><span class="hour">21小时前</span></p>
                            </div>
                            <div class="item1">
                                <p class="tit">请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体</p>
                                <p class="tit-bottom"><span class="img"><img src="img/logos.png"
                                            alt="">|<span>行业新闻</span></span><span class="hour">21小时前</span></p>
                            </div>
                            <div class="item1">
                                <p class="tit">请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体</p>
                                <p class="tit-bottom"><span class="img"><img src="img/logos.png"
                                            alt="">|<span>行业新闻</span></span><span class="hour">21小时前</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="footer"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/mine.js"></script>
<script src="js/core.js"></script>

<script>
    $(function () {
        $("#header").load("./header.html")
        $("#footer").load("./footer.html")
        //获取url的参数id
        let id = GetQueryString("id");
        //浏览数记录
        Getdata(clickBrowse, { newsId: id }).then(res => {})



        // 渲染文章内容
        Getdata(columnDetail + id).then(res => {
            // console.log(res)
            let data = res.data;
            let item = `<h3 class="tit text-center">${data.title}</h3>
                                        <ul class="user-info clearfix text-center">
                                            <li>
                                                <span class="user-name">${data.ownerName}</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-time"></span>
                                                <span>${data.gmtDatetime}</span>
                                            </li>
                                            <li class="eyes${data.browseNumShow}">
                                                <span class="glyphicon glyphicon-eye-open"></span>
                                                <span>${data.browseNum}</span>
                                            </li>
                                        </ul>
                                        <div class="tip">
                                            <p>${data.summary}</p>
                                        </div>
                                        <img class="center-block img-responsive" src="${data.newsPath}" alt="">
                                        <p>${data.details}</p>`;
            $("#main-content").html(item);
            // 点赞的数量
            $("#likeNum").html(data.likeNum);
            //收藏点赞    
            let clickType = null; //-1 取消 1收藏
            // 点赞状态
            let zanIs = null;//-1 取消赞 1点赞
            // 默认渲染收藏
            Getdata(checkCollection, { newsId: id, userId: userInfo.id, userType: userType0() }).then(res => {
                if (res.data == true) {
                    clickType = -1;
                    $("#iconsc").attr("class", "glyphicon glyphicon-star");
                } else {
                    clickType = 1;
                    $("#iconsc").attr("class", "glyphicon glyphicon-star-empty");
                }
            })
            // 默认渲染点赞状态
            // 加载完成判断是否点赞id icondz
            Getdata(checkFabulous, { newsId: id, userId: userInfo.id, userType: userType0() }).then(res => {
                if (res.data == true) {
                    zanIs = 1;
                    $("#icondz").attr("class", "iconfont icon-thumbup-fill");
                } else {
                    zanIs = -1;
                    $("#icondz").attr("class", "iconfont icon-zan");
                }
                $("#clickFabulous").attr("dzoff", clickType)
            })
            // 点击收藏
            $("#clickCollection").click(function () {
                // 加载完成判断是否被收藏id iconsc   是 glyphicon-star 否  glyphicon-star-empty                
                if (userInfo.id) {
                    Getdata(clickCollection, { newsId: id, userId: userInfo.id, userType: userType0(), clickType }).then(res => {
                        if (clickType == -1) {
                            clickType = 1;
                            $("#iconsc").attr("class", "glyphicon glyphicon-star-empty");
                        } else {
                            clickType = -1;
                            $("#iconsc").attr("class", "glyphicon glyphicon-star");
                        }
                    })

                } else {
                    alert("请先登录！")
                }

            })


            // 点击点赞
            $("#clickFabulous").click(function () {
                if (userInfo.id) {
                    let likeNum = Number($("#likeNum").html());//获取文章被点赞的数量
                    if (zanIs == 1) {
                        $("#icondz").attr("class", "iconfont icon-zan");                        
                        $("#likeNum").html(likeNum -= 1);
                        zanIs = -1;
                    } else if (zanIs == -1) {
                        $("#icondz").attr("class", "iconfont icon-thumbup-fill");                        
                        $("#likeNum").html(likeNum += 1);
                        zanIs = 1;
                    }
                    Getdata(clickFabulous, { newsId: id, userId: userInfo.id, userType: userType0(), clickType: zanIs }).then(res => {                        
                    })
                } else {
                    alert('请先登录！')
                }
            })

        })


        // 回复
        $("#home .replyList .replyBtn").click(function () {
            alert(11111)
            $(this).next(".replyInfo").toggleClass('disnone');
            $("#home .replyList .replyInfo").toggleClass('disnone');
        })











        // 侧栏-热门平台
        Getdata(busList, {
            type: 2, //商户类型（  1正常商户 2热门商户 3黑商户 -1查全部）
            size: 10, //每页条数
            current: 1 //页码
        }).then(res => {
            // console.log(res);
            let hotplat = '';
            $.each(res.data.records, function (index, val) {
                hotplat += `<div class="item clearfix">
                                <div class="img"><img src="${val.imgPath}" alt=""><span class="jg">监管中</span></div>
                                <div class="txt">
                                    <a href="platDetail.html?id=${val.id}">
                                        <p class="tit">${val.name}</p>
                                    </a>
                                    <span class="span-group"><span class="s1">人气评分</span><span class="s2">${val.radarScore}</span></span>
                                    <div class="label-group"><span>澳大利亚</span> | <span>5国监管</span> | <span>全牌照</span></div>
                                </div>
                            </div>`;
            })
            $("#home1").html(hotplat);

        })
        // 侧栏平台排行
        Getdata(getListBySort, { current: 1, size: 7 }).then(res => {
            let rankItem = '';
            $.each(res.data.records, function (index, val) {
                rankItem += `<div class="item clearfix">
                                <div class="img"><img src="${val.imgPath}" alt=""><span class="jg">监管中</span></div>
                                <div class="txt">
                                    <a href="platDetail.html?id=${val.id}">
                                        <p class="tit">${val.name}</p>
                                    </a>
                                    <span class="span-group"><span class="s1">人气评分</span><span class="s2">9.33</span></span>
                                    <div class="label-group"><span>澳大利亚</span> | <span>5国监管</span> | <span>全牌照</span></div>
                                </div>
                                <span class="top">${index + 1}</span>
                            </div>`
            })
            $("#profile1").html(rankItem)
        })



        // 评论---文章
        // console.log(userInfo.id)
        let userType = null; //评论人类型 1,平台管理员 2商户 3用户
        let fromName = null //评论人名称
        if (userInfo) {
            fromName = userInfo.name;
        }
        let toId = ''; //接收人id
        let toName = ''; //接收人名称
        let fromHeadPath = userInfo.imgUrl; //评论人头像地址
        let content = ''; //评论内容
        let parentId = ''; //父评论id
        $("#submitbtn").click(function () {
            content = $("#home .input-content textarea").val();
            if (content == "") {
                alert("评论不能为空！")
                return false;
            }
            $.ajax({
                url: apiurl + releaseComment,
                type: 'POST',
                dataTyp: "json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({
                    "newsId": id,
                    "fromId": userInfo.id,
                    "fromName": fromName,
                    "toId": toId,
                    "toName": toName,
                    "fromHeadPath": fromHeadPath,
                    "content": content,
                    "userType": userType0(),
                    "parentId": parentId
                }),
                success: res => {
                    if (res.success == true) {
                        alert("评论成功！");
                        window.location.reload();
                    }else{
                        alert(res.msg)
                    }

                },
            })
        })



        // 文章评论列表 
        let noComment = `暂无没有评论，快来抢沙发呀！`;
        let rItem = '';

        Getdata(getCommentList, { newsId: id }).then(res => {

            // console.log(res)
            $.each(res.data, function (index, val) {
                rItem += `<li><div class="header">
                                            <img src="${val.fromHeadPath}" alt="">
                                            <span class="name">${val.fromName}</span>
                                        </div>
                                        <p class="contents">${val.content}</p>
                                        <div class="replyFooter clearfix">
                                            <span class="seeReply${val.replyCount} pull-right seeReplyBtn" style="padding-left:.5em;line-height:24px;" rid=${val.id}>查看回复<span class="replyNum${val.replyCount}">(${val.replyCount})</span></span>
                                            <span class="pull-right replyBtn"><i class="iconfont icon-huifu"></i>回复</span>
                                            <span class="time pull-right">${val.gmtDatetime}</span>
                                            <div class="replyInfo clearfix disnone">
                                                <textarea name="" id="" cols="30" rows="10"></textarea>
                                                <button class="replyCn pull-right" data-fromId = ${val.fromId} data-fromName=${val.fromName}  data-parentId = ${val.id}>回复评论</button>
                                            </div>
                                            <ul class="disnone commentReply">
                                                <li>
                                                    <span class="name"></span> 
                                                    <p class="contents"></p>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>`;
            })
            $("#home .replyList").html(rItem);
            // 点击回复弹出回复框
            $("#home .replyList .replyBtn").click(function () {
                $(this).parents('.replyFooter').find(".replyInfo").toggleClass('disnone');
            })
            // 点击回复评论
            $("#home .replyList .replyCn").click(function () {
                toId = $(this).attr("data-fromId");
                toName = $(this).attr("data-fromName");
                parentId = $(this).attr("data-parentId");
                if (userInfo.enterType) {
                    userType = 2;
                } else {
                    userType = 3;
                }
                content = $(this).prev().val();
                if (content == "") {
                    alert("回复不能为空！")
                    return false;
                }
                $.ajax({
                    url: apiurl + releaseComment,
                    type: 'POST',
                    dataTyp: "json",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        "newsId": id,
                        "fromId": userInfo.id,
                        "fromName": fromName,
                        "toId": toId,
                        "toName": toName,
                        "fromHeadPath": fromHeadPath,
                        "content": content,
                        "userType": userType,
                        "parentId": parentId
                    }),
                    success: res => {
                        if (res.success == true) {
                            alert("回复成功！");
                            window.location.reload();
                        }

                    },
                })
            })


            // 点击查看评论回复
            $("#home .replyList .seeReplyBtn").click(function () {
                // 显示评论回复列表
                $(this).parents('.replyFooter').find(".commentReply").toggleClass('disnone');
                let commentId = $(this).attr("rid");
                let commentReplyItem = "";
                // console.log(commentId)
                // 渲染评论回复列表
                Getdata(getCommentReplyList, { commentId }).then(res => {
                    $.each(res.data, function (index, val) {
                        commentReplyItem += `<li><span class="name" style="color:#4699f8">${val.fromName}</span> <span class="spanBlock">回复</span> <span class="name" style="color:#4699f8">${val.toName}</span><p class="contents">${val.content}</p></li>`;
                    })
                    $("#home .replyList .commentReply").html(commentReplyItem)
                })
            })
        })






    })
</script>

</html>